<template>
  <div>
    <el-dialog title="产品" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form" :rules="rules" :model="form" label-width="180px">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="产品描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="产品封面" prop="cover">
          <el-upload class="avatar-uploader" :action="url()" :show-file-list="false"
            :headers="{ 'Authorization': Authorization }" :on-success="handleAvatarSuccess">
            <img v-if="form.cover" :src="form.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>

        </el-form-item>
        <el-form-item label="产品内容图" prop="picture">
          <el-upload class="avatar-uploader" :action="url()" :headers="{ 'Authorization': Authorization }"
            :show-file-list="false" :on-success="handleAvatarSuccesspicture">
            <img v-if="form.picture" :src="form.picture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="日利率" prop="interestRate">
          <el-input v-model="form.interestRate" />
        </el-form-item>
        <el-form-item label="持有时长" prop="holdTime">
          <el-input v-model="form.holdTime" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">先息后本</el-radio>
            <el-radio :label="0">返息不返本</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否开放" prop="open">
          <el-radio-group v-model="form.open">
            <el-radio :label="1">已开放</el-radio>
            <el-radio :label="0">未开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否活动产品" prop="isActive">
          <el-radio-group v-model="form.isActive">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否赠送活动券" prop="isSendCoupon">
          <el-radio-group v-model="form.isSendCoupon">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动券比例" prop="activeCouponRate" v-if="form.isSendCoupon === 1">
          <el-input v-model="form.activeCouponRate" />
        </el-form-item>
        <el-form-item label="是否wk抵扣" prop="wkDeduction">
          <el-radio-group v-model="form.wkDeduction">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否福利产品" prop="isBenefit">
          <el-radio-group v-model="form.isBenefit">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否赠送福利产品额度" prop="isSendBenefitAmount" v-if="form.isBenefit === 0">
          <el-radio-group v-model="form.isSendBenefitAmount">
            <el-radio :label="1">是</el-radio>

            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否赠送期权" prop="hasStockOptions">
          <el-radio-group v-model="form.hasStockOptions">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否参与合伙人分红" prop="isPartnerEarnings">
          <el-radio-group v-model="form.isPartnerEarnings">
            <el-radio :label="1">是</el-radio>

            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="福利产品开始时间" prop="benefitStartTime" v-if="form.isBenefit == 1">
          <el-date-picker v-model="form.benefitStartTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="福利产品结束时间" prop="benefitEndTime" v-if="form.isBenefit == 1">
          <el-date-picker v-model="form.benefitEndTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="福利产品每天开始时间" prop="benefitDayStartTime" v-if="form.isBenefit == 1">
          <el-time-picker v-model="form.benefitDayStartTime" value-format="HH:mm:ss" placeholder="任意时间点">
          </el-time-picker>

        </el-form-item>
        <el-form-item label="福利产品每天结束时间" prop="benefitDayEndTime" v-if="form.isBenefit == 1">
          <el-time-picker v-model="form.benefitDayEndTime" value-format="HH:mm:ss" placeholder="任意时间点">
          </el-time-picker>

        </el-form-item>

        <el-form-item label="业绩倍率" prop="performancePower">
          <el-input v-model="form.performancePower" placeholder="请输入业绩倍率" />
        </el-form-item>
        <el-form-item label="产品购买占用余额倍率" prop="buyInventoryRate">
          <el-input v-model="form.buyInventoryRate" placeholder="请输入产品购买占用余额倍率" />
        </el-form-item>
        <el-form-item label="赠送期权比例" prop="stockOptionsRate" v-if="form.hasStockOptions == 1">
          <el-input type="number" v-model="form.stockOptionsRate" placeholder="请输入期权比例,例如0.1" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="最低购买金额" prop="minAmount">
          <el-input v-model="form.minAmount" />

        </el-form-item>
        <el-form-item label="最高金额" prop="maxAmount">
          <el-input v-model="form.maxAmount" />

        </el-form-item>
        <el-form-item label="总限购金额" prop="sumLimitMoney">
          <el-input v-model="form.sumLimitMoney" />

        </el-form-item>
        <el-form-item label="复投金额" prop="reinvestAmount">
          <el-input v-model="form.reinvestAmount" />

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="showImgState">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { dividendSaveOrUpdate, action } from '@/api/table'
import { getToken } from '@/utils/auth'

export default {
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      showImgState: false,
      dialogImageUrl: '',
      listLoading: true,
      total: 0,
      queryParams: {
        rate: '',
        userId: ''
      },
      list: [],
      record: {},
      url: action,
      Authorization: '',
      form: {
        name: '',
        description: '',
        cover: '',
        picture: '',
        holdTime: '',
        status: '',
        open: '',
        sort: '',
        minAmount: '',
        isPartnerEarnings: 1,
        maxAmount: '',
        sumLimitMoney: '',
        reinvestAmount: '',
        interestRate: '',
        hasStockOptions: '',
        stockOptionsRate: '',
        type: '',
        performancePower: '',
        wkDeduction: 1,
        isBenefit: 0,
        isSendBenefitAmount: 0,
        buyInventoryRate: 1,
      },
      rules: {
        isPartnerEarnings: [
          { required: true, message: '请选择是否参与合伙人分红', trigger: 'change' }
        ],
        buyInventoryRate: [
          { required: true, message: '请输入产品购买占用余额倍率', trigger: 'blur' },
          { min: 1, message: '产品购买占用余额倍率不能小于1', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择产品类型', trigger: 'change' }

        ],
        performancePower: [
          { required: true, message: '请输入业绩倍率', trigger: 'blur' }

        ],
        hasStockOptions: [
          { required: true, message: '请选择是否赠送期权', trigger: 'change' }

        ],
        stockOptionsRate: [
          { required: true, message: '请输入期权比例,例如0.1', trigger: 'blur' }

        ],
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '产品描述', trigger: 'blur' }
        ],
        cover: [
          { required: true, message: '请上传产品封面', trigger: 'change' }
        ],
        picture: [
          { required: true, message: '请上传产品内容图', trigger: 'change' }
        ],
        interestRate: [
          { required: true, message: '请输入日利率', trigger: 'blur' }
        ],
        holdTime: [
          { required: true, message: '请输入持有时长', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        open: [
          { required: true, message: '请选择是否开放', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        minAmount: [
          { required: true, message: '请输入最低购买金额', trigger: 'blur' }
        ],
        maxAmount: [
          { required: true, message: '请输入最高金额', trigger: 'blur' }
        ],

        sumLimitMoney: [
          { required: true, message: '请输入总限购金额', trigger: 'blur' }
        ],
        reinvestAmount: [
          { required: true, message: '请输入复投金额', trigger: 'blur' }
        ]

      }

    }
  },
  methods: {
    handleAvatarSuccesspicture(res, file) {
      this.form.picture = res.data
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.cover = res.data
    },
    edit(e) {
      this.form = JSON.parse(JSON.stringify(e))
      this.dialogVisible = true
      this.Authorization = 'Bearer ' + getToken()
    },
    async show(record) {
      this.dialogVisible = true
      this.Authorization = 'Bearer ' + getToken()
      this.form = {
        name: '',
        description: '',
        cover: '',
        picture: '',
        interestRate: '',
        holdTime: '',
        status: '',
        open: '',
        sort: '',
        minAmount: '',
        maxAmount: '',
        sumLimitMoney: '',
        reinvestAmount: '',
        hasStockOptions: '',
        stockOptionsRate: '',
        performancePower: '',
        type: '',
        isPartnerEarnings: 1,
        wkDeduction: 1,
        isBenefit: 0,
        isSendBenefitAmount: 0,
        buyInventoryRate:1,
        isActive:0,
        isSendCoupon:0,
        activeCouponRate:'',
      }
    },
    confirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('是否确认?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            dividendSaveOrUpdate(this.form).then(res => {
              this.dialogVisible = false
              this.queryParams.rate = ''
              this.$parent.fetchData()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.list {
  .item {
    border: 1px solid #c0ccda;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 10px;

    >div {
      display: flex;

      img {
        margin-right: 15px;
      }
    }

    >i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
